<template>
  <a-modal
    v-model:open="state.dialog.isShowDialog"
    :title="state.dialog.title"
    @ok="handleSubmit"
    @cancel="handleReset"
    :width="620"
    centered
  >
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :multiple="true"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">把文件拖入或点击指定区域，完成上传</p>
      <p class="ant-upload-hint">上传Excel类型文件</p>
    </a-upload-dragger>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import type { UploadChangeParam } from 'ant-design-vue';
  const fileList = ref([]);
  const handleChange = (info: UploadChangeParam) => {
    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  function handleDrop(e: DragEvent) {
    console.log(e);
  }
  const emit = defineEmits(['refresh']);

  const state = reactive({
    dialog: {
      isShowDialog: false,
      title: '导入',
    },
  });
  const openDialog = () => {
    state.dialog.isShowDialog = true;
  };

  // 提交处理[5](@ref)
  const handleSubmit = async () => {
    try {
      // 调用API接口提交数据
      state.dialog.isShowDialog = false;
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 重置表单
  const handleReset = () => {
    fileList.value = [];
    state.dialog.isShowDialog = false;
  };

  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 10px;
  }
</style>
